<html>

<head>
    <style>
        .arrow_box {
            margin-top: 100px;
            width: 600px;
            height: 300px;
            position: relative;
            background: #77a6d5;
            border: 4px solid #c2e1f5;
        }

        .arrow_box:after,
        .arrow_box:before {
            bottom: 100%;
            left: 50%;
            border: solid transparent;
            content: "";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .arrow_box:after {
            border-color: rgba(119, 166, 213, 0);
            border-bottom-color: #0b4987;
            border-width: 30px;
            margin-left: -30px;
        }

        .arrow_box:before {
            border-color: rgba(24, 138, 22, 0);
            border-bottom-color: #c2f5cd;
            border-width: 36px;
            margin-left: -36px;
        }
    </style>
</head>

<body>
<div class="arrow_box">css arrow please</div>
</body>

</html>